/**
 * Created by fanweihua on 2016/12/2.
 */
import React, {Component} from 'react';
import {Link, hashHistory} from 'react-router';
import Example from '../public/config/example.js';

const App = React.createClass({
    componentDidMount: function () {
        Example._go();
    },
    render(){
        return (
            <ul>
                <LevelSpecification></LevelSpecification>
                <Form></Form>
                <BasicComponent></BasicComponent>
                <OperationCoupleBack></OperationCoupleBack>
                <NavigationCorrelation></NavigationCorrelation>
                <SearchRelated></SearchRelated>
                <ReduxIntro></ReduxIntro>
            </ul>
        );
    }
});
module.exports = App;
const LevelSpecification = React.createClass({
    linkRoute: function () {
        hashHistory.push("/levelSpecification");
    },
    render(){
        return (
            <li>
                <div className="weui-flex js_category" onClick={this.linkRoute}>
                    <p className="weui-flex__item">规范</p>
                    <img src="/bower_components/weui-master/example/images/icon_nav_z-index.png" alt=""></img>
                </div>
            </li>
        );
    }
});
/**
 * 表单
 */
const Form = React.createClass({
    render() {
        return (
            <li>
                <div className="weui-flex js_category">
                    <p className="weui-flex__item">表单</p>
                    <img src="/bower_components/weui-master/example/images/icon_nav_form.png" alt=""></img>
                </div>
                <div className="page__category js_categoryinner">
                    <div className="weui-cells page__category-content">
                        <Link to="/button" className="weui-cell weui-cell_access js_item" data-id="button">
                            <div className="weui-cell__bd">
                                <p>button（按钮）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="/input" className="weui-cell weui-cell_access js_item" data-id="input">
                            <div className="weui-cell__bd">
                                <p>input（表单）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="/list" className="weui-cell weui-cell_access js_item" data-id="list">
                            <div className="weui-cell__bd">
                                <p>list（列表）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="/slider" className="weui-cell weui-cell_access js_item" data-id="slider">
                            <div className="weui-cell__bd">
                                <p>slider（滑块）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="/uploader" className="weui-cell weui-cell_access js_item" data-id="uploader">
                            <div className="weui-cell__bd">
                                <p>uploader（上传组件）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                    </div>
                </div>
            </li>
        );
    }
});
/**
 * 基础组件
 */
const BasicComponent = React.createClass({
    render(){
        return (
            <li>
                <div className="weui-flex js_category">
                    <p className="weui-flex__item">基础组件</p>
                    <img src="/bower_components/weui-master/example/images/icon_nav_layout.png" alt=""></img>
                </div>
                <div className="page__category js_categoryinner">
                    <div className="weui-cells page__category-content">
                        <Link to="/article" className="weui-cell weui-cell_access js_item" data-id="article">
                            <div className="weui-cell__bd">
                                <p>article（文章）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="/badge" className="weui-cell weui-cell_access js_item" data-id="badge">
                            <div className="weui-cell__bd">
                                <p>badge（徽章）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="/flex" className="weui-cell weui-cell_access js_item" data-id="flex">
                            <div className="weui-cell__bd">
                                <p>flex（布局）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="/footer" className="weui-cell weui-cell_access js_item" data-id="footer">
                            <div className="weui-cell__bd">
                                <p>footer（页脚）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="/gallery" className="weui-cell weui-cell_access js_item" data-id="gallery">
                            <div className="weui-cell__bd">
                                <p>gallery（画廊）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="/grid" className="weui-cell weui-cell_access js_item" data-id="grid">
                            <div className="weui-cell__bd">
                                <p>grid（九宫格）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="/icons" className="weui-cell weui-cell_access js_item" data-id="icons">
                            <div className="weui-cell__bd">
                                <p>icons（图标）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="/loadmore" className="weui-cell weui-cell_access js_item" data-id="loadmore">
                            <div className="weui-cell__bd">
                                <p>loadmore（加载更多）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="/panel" className="weui-cell weui-cell_access js_item" data-id="panel">
                            <div className="weui-cell__bd">
                                <p>panel（面板）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="/preview" className="weui-cell weui-cell_access js_item" data-id="preview">
                            <div className="weui-cell__bd">
                                <p>preview（表单预览）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="/progress" className="weui-cell weui-cell_access js_item" data-id="progress">
                            <div className="weui-cell__bd">
                                <p>progress（进度条）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                    </div>
                </div>
            </li>
        );
    }
});
/**
 * 操作反馈
 */
const OperationCoupleBack = React.createClass({
    render(){
        return (
            <li>
                <div className="weui-flex js_category">
                    <p className="weui-flex__item">操作反馈</p>
                    <img src="/bower_components/weui-master/example/images/icon_nav_feedback.png" alt=""></img>
                </div>
                <div className="page__category js_categoryInner" data-height="220">
                    <div className="weui-cells page__category-content">
                        <Link to="/Actionsheet" className="weui-cell weui-cell_access js_item" data-id="actionsheet">
                            <div className="weui-cell__bd">
                                <p>actionsheet（弹出式菜单）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="/Dialog" className="weui-cell weui-cell_access js_item" data-id="dialog">
                            <div className="weui-cell__bd">
                                <p>dialog（对话框）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="/Msg" className="weui-cell weui-cell_access js_item" data-id="msg">
                            <div className="weui-cell__bd">
                                <p>msg（提示页）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="/Picker" className="weui-cell weui-cell_access js_item" data-id="picker">
                            <div className="weui-cell__bd">
                                <p>picker（多列选择器）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="/Toast" className="weui-cell weui-cell_access js_item" data-id="toast">
                            <div className="weui-cell__bd">
                                <p>toast（弹出式提示）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                    </div>
                </div>
            </li>
        );
    }
});
/**
 * 导航相关
 */
const NavigationCorrelation = React.createClass({
    render(){
        return (
            <li>
                <div className="weui-flex js_category">
                    <p className="weui-flex__item">导航相关</p>
                    <img src="/bower_components/weui-master/example/images/icon_nav_nav.png"></img>
                </div>
                <div className="page__category js_categoryInner" data-height="88">
                    <div className="weui-cells page__category-content">
                        <Link to="Navbar" className="weui-cell weui-cell_access js_item" data-id="navbar"
                              href="javascript:;">
                            <div className="weui-cell__bd">
                                <p>Navbar（上）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="Tabbar" className="weui-cell weui-cell_access js_item" data-id="tabbar"
                              href="javascript:;">
                            <div className="weui-cell__bd">
                                <p>Tabbar（下）</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                    </div>
                </div>
            </li>
        );
    }
});
/**
 * 搜索相关
 */
const SearchRelated = React.createClass({
    render(){
        return (
            <li>
                <div className="weui-flex js_category">
                    <p className="weui-flex__item">搜索相关</p>
                    <img src="/bower_components/weui-master/example/images/icon_nav_search.png" alt=""></img>
                </div>
                <div className="page__category js_categoryInner" data-height="44">
                    <div className="weui-cells page__category-content">
                        <Link to="SearchBar" className="weui-cell weui-cell_access js_item" data-id="searchbar"
                              href="javascript:;">
                            <div className="weui-cell__bd">
                                <p>Search Bar</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                    </div>
                </div>
            </li>
        )
    }
});
/**
 * Redux
 */
class ReduxIntro extends Component {
    render() {
        return (
            <li>
                <div className="weui-flex js_category">
                    <p className="weui-flex__item">Redux</p>
                    <img src="/bower_components/weui-master/example/images/redux.png" alt=""></img>
                </div>
                <div className="page__category js_categoryInner" data-height="44">
                    <div className="weui-cells page__category-content">
                        <Link to="ReduxIntro" className="weui-cell weui-cell_access js_item" data-id="reduxIntro"
                              href="javascript:;">
                            <div className="weui-cell__bd">
                                <p>简介</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                        <Link to="Todo" className="weui-cell weui-cell_access js_item" data-id="todo"
                              href="javascript:;">
                            <div className="weui-cell__bd">
                                <p>Todo 实例</p>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </Link>
                    </div>
                </div>
            </li>
        )
    }
}
;